const { defineConfig } = require('@vue/cli-service')

/**
 * 环境变量（node.js）
 *  1. 开发环境（本机服务器）：npm run serve =》标识：process.env.NODE_ENV === 'development'
 *  2. 生产（线上服务器）环境：npm run duild =》标识：process.env.NODE_ENV === 'production'
 */
console.log('环境标识', process.env.NODE_ENV)

// 排除大文件对象配置
let externals = {}
// cdn js文件的链接
let cdn = { js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  // 生产（线上服务器）环境 会执行下面代码
  externals = {
    vue: 'Vue',
    'element-ui': 'ELEMENT',
    echarts: 'echarts'
  }
  // 排出后，需要引入到页面的cdn js脚本链接
  cdn = {
    js: [
      // vue js must at first!
      'https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.min.js',
      // element-ui js
      'https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.8/index.min.js',
      // echarts js
      'https://cdn.bootcdn.net/ajax/libs/echarts/5.2.1/echarts.min.js'
    ]
  }
}

module.exports = defineConfig({
  transpileDependencies: true,
  // 既让elint检查格式，有格式问题，不会造成编译报错，影响开发
  lintOnSave: true,
  // 打包的时候，不生成sourcMap文件
  // sourcMap作用❓： 调试源码代码
  // 判断是否是线上环境，是的话赋值true
  productionSourceMap: !isProduction,
  // 设置资源访问路径为当前目录
  publicPath: './',
  // 排除大文件
  configureWebpack: {
    // externals: {
    //   js版本中window全局的成员名称
    //   key包名:window全局的成员名称
    //   vue: 'Vue',
    //   'element-ui': 'ELEMENT',
    //   echarts: 'echarts'
    // }
    externals
  },
  chainWebpack (config) {
    // 注入cdn变量 (打包时会执行)，注入html中
    config.plugin('html').tap(args => {
      args[0].cdn = cdn // 配置cdn给插件
      return args
    })
  }
})
